<template>
  <div class="pd-le-ri">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <el-icon :size="11"><user-filled /></el-icon> 专栏管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div style="width: 400px; display: flex">
        <div style="margin: 0 20px; text-align: right">
          <el-button type="primary" @click="dialogVisible = true"
            >添加专栏</el-button
          >
        </div>
      </div>
      <div style="margin: 20px 0 30px">
        <el-table
          :data="tableData.arr"
          border
          style="width: 100%"
          :stripe="true"
        >
          <el-table-column prop="name" label="专栏名"></el-table-column>
          <!-- <el-table-column
            prop="leftCongratulations"
            label="左坐标"
          ></el-table-column>
          <el-table-column
            prop="rightCongratulations"
            label="右坐标"
          ></el-table-column> -->
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <el-button
                type="success"
                size="small"
                @click="changeCategory(scope.row)"
                >修改</el-button>
              <el-button
                size="small"
                type="danger" 
                @click="onDeleteChange(scope.row)"
                >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-bottom: 10px">
        <div class="demo-pagination-block">
          <el-pagination
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="填写专栏信息" width="30%">
      <el-form ref="login" label-width="80px" class="ms-content" :model="form">
        <el-form-item prop="name" label="专栏名">
          <el-input placeholder="请输入专栏名" v-model="form.name"> </el-input>
        </el-form-item>
        <!-- <el-form-item prop="leftCongratulations" label="左坐标">
          <el-input
            placeholder="请输入左坐标"
            v-model="form.leftCongratulations"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="rightCongratulations" label="右坐标">
          <el-input
            placeholder="请输入右坐标"
            v-model="form.rightCongratulations"
          >
          </el-input>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addAdress">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible1" title="填写专栏信息" width="30%">
      <el-form
        ref="login"
        label-width="80px"
        class="ms-content"
        :model="form1.name"
      >
        <el-form-item prop="name" label="专栏名">
          <el-input placeholder="请输入专栏名" v-model="form1.name">
          </el-input>
        </el-form-item>
        <!-- <el-form-item prop="leftCongratulations" label="左坐标">
          <el-input
            placeholder="请输入左坐标"
            v-model="form1.form.leftCongratulations"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="rightCongratulations" label="右坐标">
          <el-input
            
            placeholder="请输入右坐标"
            v-model="form1.form.rightCongratulations"
          >
          </el-input>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="adjustCategory">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisibleDelete" title="删除专栏" width="30%">
      <div>是否删除该专栏</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisibleDelete = false">取消</el-button>
          <el-button type="primary" @click="onDelete">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from "vue";
import {
  getSchoolList,
  addSchoole,
  editSchoole,
  addCategory,
  updateCategory,
  deleteCategory,
  getCategory
} from "../../http/school/school";
import { UserFilled } from "@element-plus/icons";

export default defineComponent({
  components: {
    UserFilled,
  },
  setup() {
    let tableData = reactive({
      arr: [],
    });
    let form: any = reactive({
      rightCongratulations: "",
      leftCongratulations: "",
      name: "",
    });
    let form1: any = reactive({
      name: ''
    });
    let total = ref();
    let page: number = 1;
    const dialogVisible = ref(false);
    const dialogVisible1 = ref(false);
    const dialogVisibleDelete = ref(false);


    onMounted(() => {
      getList();
    });

    const getList = async () => {
      const res: any = await getCategory({page, size: 10});
      tableData.arr = res.data.records;
      total.value = res.data.total;
    };

    const handleCurrentChange = (e: number) => {
      page = e;
      getList();
    };

    const addAdress = async () => {
      await addCategory({name: form.name});
      dialogVisible.value = false;
      getList();
    };
    
    const adjustCategory = async () => {
      await updateCategory({name: form1.name, id: form1.id});
      dialogVisible1.value = false;
      getList();
    };

    // addCategory,
    // updateCategory,
    // deleteCategory,
    // getCategory

    const clickBtn = () => {
      getList();
    };

    const changeCategory = (e: any) => {
      // console.log(e)
      form1.name = e.name;
      form1.id = e.id
      dialogVisible1.value = true;
    };

    const onDeleteChange = (e: any) => {
      form.id = e.id;
      dialogVisibleDelete.value = true;
    }

    const addAdress1 = async () => {
      // console.log(12312)
      // await addCategory(form1.form);
      // dialogVisible1.value = false;
      // getList();
    };

    const onDelete = async () => {
      await deleteCategory({id: form.id});
      dialogVisibleDelete.value = false;
      getList();
    }

    return {
      tableData,
      total,
      handleCurrentChange,
      clickBtn,
      onDeleteChange,
      onDelete,
      dialogVisible,
      dialogVisibleDelete,
      addAdress,
      form,
      form1,
      dialogVisible1,
      addAdress1,
      changeCategory,
      adjustCategory
    };
  },
});
</script>

<style scoped>
</style>
